<template>

  <!-- 外层大盒子 -->
  <view>
    <!-- 占位符 -->
    <view class="status_bar">
     </view>  
    <!-- 设置 -->
    <view class="shezhi">
      <image src="./img/shezhi.png" mode=""></image>
      <text>设置</text>
    </view>
    <!-- 信息 -->
    <!-- 头像 -->
    <view class="gerenxinxi">
      <view class="touxiang">
        <image src="./img/tushuyou.png" mode=""></image>
        
      </view>
      <!-- 昵称+学院 -->
      <view class="usernames">
        <text class="username">九米阳光</text>
        <image src="./img/huangguan.png" mode="" class="huangguan"></image>
        <view class="suoshu">
          舜泽学员
        </view>
      </view>
      <!-- 切换身份 -->
      <view class="qiehuan">
         <image src="./img/xunhuan.png" mode=""></image>
         <text>切换身份</text>
         <view class="qiehuanshenfens">
           <view class="laoshi">
             <image src="./img/laoshi.png" mode=""></image>
             <text class="laoshiduan">老师端</text>
           </view>
           <view class="xuesheng">
             <image src="./img/shangjia.png" mode=""></image>
             <text xueshengduan>商家端</text>
           </view>
         </view>
      </view>
      
    </view>
    <!-- 预约续费提醒 -->
    <view class="xufeitixing" hidden>
     <image src="./img/gonggao.png" mode="">
      
     </image>
      <text>您课时剩余7天,为了避免耽误课程进度,请快续费哦~</text>
    </view>
    <!-- 课程表 -->
    <view>
      <view class="mykechengbiao">
        <text>|</text>
        <text>我的课程表</text>
        <text>课时查询</text>
      </view>
      <!-- 课表详情 -->
      <view class="mykebiaoxiang">
        <view class="benzhoukecheng">
          本周课程>
        </view>
        <view class="yikuaihecheng">
          <view class="kechengneirong">
            <image src="./img/tuoyuanhei.png" mode="" class="tuoyuan">
               <text class="xingqi">星期一</text>
            </image>
            <text class="banjixiang">钢琴初级班</text>
          </view>
          <view class="kechengshijian">
            <text>5月27</text>
            <text>8:00-12:00</text>
            <text>|</text>
            <text>A教室</text>
            <text>小P老师</text>
          </view>
        </view>
        
        <view class="yikuaihecheng">
          <view class="kechengneirong">
            <image src="./img/tuoyuanhei.png" mode="" class="tuoyuan">
               <text class="xingqi">星期一</text>
            </image>
            <text class="banjixiang">钢琴初级班</text>
          </view>
          <view class="kechengshijian">
            <text>5月27</text>
            <text>8:00-12:00</text>
            <text>|</text>
            <text>A教室</text>
            <text>小P老师</text>
          </view>
        </view>
        
        
        
        <view class="">
          
        </view>
        
      </view>
    </view>
    <!-- logo -->
    <view class=" bannerlogo">
      <image src="./img/bannerlogo.png" mode=""></image>
    </view>
    <!-- 其他功能 -->
    <view>
      <view class="mykechengbiao">
        <text>|</text>
        <text>其他功能</text>
        
      </view>
      
      <view class="qitagongneng">
        <ul>
          <li>
            <image src="./img/tushu.png" mode=""></image>
            <text>作业</text>
          </li>
          <li>
            <image src="./img/tushu.png" mode=""></image>
            <text>补卡</text>
          </li>
          <li>
            <image src="./img/tushu.png" mode=""></image>
            <text>打卡</text>
          </li>
          <li>
            <image src="./img/tushu.png" mode=""></image>
            <text>评价老师</text>
          </li>
        </ul>
        <ul>
          <li>
            <image src="./img/tushu.png" mode=""></image>
            <text>我的卡包</text>
          </li>
        <li>
          <image src="./img/tushu.png" mode=""></image>
          <text>我的订单</text>
        </li>
        <li>
          <image src="./img/tushu.png" mode=""></image>
          <text>特权卡</text>
        </li>
        <li>
          <image src="./img/tushu.png" mode=""></image>
          <text>我的客服</text>
        </li>
        </ul>
      </view>
      
    </view>
   <!-- 底部tabr -->
    <view class="tabr">
      <li>
        <image src="../../../static/tabbar/icon1.png" mode=""></image>
        <view >
          首页
        </view>
      </li>
     <li>
       <image src="../../../static/tabbar/icon2.png" mode=""></image>
       <view >
         商城
       </view>
     </li>
     <li>
       <image src="../../../static/tabbar/icon3.png" mode=""></image>
       <view >
         消息
       </view>
     </li>
     <li>
       <image src="../../../static/tabbar/icon4-4.png" mode=""></image>
       <view >
         我的
       </view>
     </li>
      
    </view>
  </view>
</template>

<script>
</script>

<style>

  /* 设置 */
  .shezhi {
    margin-left: 575rpx;
    margin-top: 85rpx;
  }
  .shezhi image{
    width: 42rpx;
    height: 40rpx;
    vertical-align: middle;
    padding-right: 11rpx;
  }
   .shezhi text {
    width: 62rpx;
    height: 30rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;}
    /* 个人信息 */
    .gerenxinxi {
      margin-top: 177rpx;
      margin-left: 30rpx;
      height: 120rpx;
    }
.touxiang {
  float: left;
  width: 120rpx;
  height: 120rpx;
}
.touxiang image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.usernames {
 float: left;
 margin-left: 34rpx;
}
.username {
width: 142rpx;
height: 34rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 800;
color: #333333;
line-height: 40rpx;
padding-right: 14rpx;
}
.huangguan {
  width: 35rpx;
  height: 30rpx;
}
.suoshu {
  width: 112rpx;
  height: 27rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #AAAAAA;
  line-height: 40rpx;
  padding-top: 22rpx;

}
.qiehuan {
  float: right;
  margin-right: 74rpx;
  
}
.qiehuan image {
  width: 29rpx;
  height: 26rpx;
  vertical-align: middle;
  margin-right: 7rpx;
}
.qiehuan text {
  width: 111rpx;
  height: 27rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

}
/* 我的课程表 */
.yikuaihecheng {
  height: 181rpx;
  border-bottom: 1px solid #f5f5f5;
     padding-bottom: 20px;
}
.mykechengbiao {
  margin-left: 30rpx;
  margin-top: 53rpx;
}
.mykechengbiao text:nth-child(1){
  width: 5rpx;
  height: 19rpx;
  background: #8DCE2A;
  border-radius: 3rpx;
  color: #8DCE2A;
  margin-right: 16rpx;

}
.mykechengbiao text:nth-child(2){
  width: 157rpx;
  height: 30rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;
  margin-right: 20rpx;
}
.mykechengbiao text:nth-child(3){
  width: 94rpx;
  height: 23rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #8DCE2A;
  line-height: 30rpx;

}
/* 课表详情 */
.mykebiaoxiang {
  margin: 30rpx auto;
  width: 690rpx;
  height: 100%;
  
  background: #FFFFFF;
  box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.16);
  border-radius: 10rpx;

}
.benzhoukecheng {
  width: 120rpx;
  height: 23rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #777777;
  line-height: 30rpx;
  float: right;
  margin-top: 32rpx;
  padding-right: 22rpx;

}
.kechengneirong {
 padding-top: 30px;
 padding-bottom: 39rpx;
}
.tuoyuan {
  position: relative;
  width: 100rpx;
  height: 44rpx;
  vertical-align: middle;
}
.xingqi{
  position: absolute;
  left: 15px;
 
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 40rpx;

}
.banjixiang {
  width: 139rpx;
  height: 27rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;
  padding-left: 36rpx;

}
.kechengshijian {
  margin-left: 26rpx;
}
.kechengshijian text {
  width: 487rpx;
  height: 25rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;
  padding-right: 17rpx;
  

}
.bannerlogo image{
  width: 689rpx;
  height: 205rpx;
  margin: 27rpx 30rpx;
}
.qitagongneng ul {
 padding-left: 0;
  display: flex;
 margin-top: 50rpx;
  
}
.qitagongneng ul li{
 display: block;
 flex-direction: column;
width: 200rpx !important;
text-align: center;
 
}
.qitagongneng li image{
  display: block;
  margin: 0 auto;
  width: 44rpx;
  height: 52rpx;
  vertical-align: middle;
  text-align: center;
}
.qitagongneng li text {
  padding-top: 20rpx;
  font-size: 28rpx;   
font-weight: bold;
  color: #333333;
}
.tabr {
  margin-top: 151rpx;
 width: 750rpx;
 height: 98rpx;
 background: #FFFFFF;
 box-shadow: 0px 3px 76px 0px rgba(192, 192, 192, 0.33);

}
.tabr {
  display: flex;
  
}
.tabr li {
 padding-top: 12rpx;
  flex: 1;
  text-align: center;
}
.tabr image {
  
  width: 40rpx;
  height: 40rpx;
 
}
.tabr view {
 
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #777777;
 

}
/* 预约续费提醒 */
.xufeitixing {
  width: 690rpx;
  height: 80rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.16);
  border-radius: 10rpx;
  margin: 54rpx 30rpx 68rpx 30rpx;

}
.xufeitixing text {
  font-size: 24rpx;
  font-weight: bold;
  color: #333333;
  line-height: 80rpx;}
  
.xufeitixing image {
  width: 109rpx;
  height: 42rpx;
  vertical-align: middle;
}
/* 切换身份 */
.qiehuanshenfens {
      position: absolute;
      top: 280rpx;
      right: 56rpx;
  width: 173rpx;
  height: 133rpx;
  background: #FFFFFF;
  box-shadow: 0px 1px 33px 2px rgba(0, 0, 0, 0.34);
  border-radius: 5rpx;

}
.qiehuanshenfens text {
  width: 71rpx;
  height: 23rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #777777;
  padding-left: 7rpx;
  

}
.laoshi {
  height: 66rpx;
  border-bottom: 1px solid #AAAAAA;
  text-align: center;
  line-height: 66rpx;
  }
  .xuesheng {
    height: 66rpx;
    text-align: center;
    line-height: 66rpx;
  }
</style>
